<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!--  Child.vue代码-->
    <template>
        <div class="child">
            <h2>child子组件部分</h2>
            <p>{{message}}</p>
            <button @click="sendMsgToParent">向父组件传值</button>
        </div>
    </template>
    <script>
        export default {
            data(){
                return {

                }
            },
            props: ['message'],
            methods: {
                sendMsgToParent: function(){
                    //使用自定义事件传递一句话过去
                    this.$emit("listenToChildEvent",this message from child)
                }
            }
        }
    </script>
    <!--  Parent.vue代码-->
    <template>
        <div class="hello">
            <!--  3、调用组件-->
            <!--  使用动态绑定进行传值，这样就可以把hello world！传递到子组件中显示了-->
            <child :message="msg" @listenToChildEvent="showMsgFromChild"></child>
            <!--  显示子组件传递的数据-->
            <p>子组件传递的值是:{{childMsg}}</p>
        </div>
    </template>
    <script>
        //1、ES6语法导入子组件
        import  child from "./Child";
        export  default {
            data() {
                return {
                    msg: "hello word!",
                    childMsg: ""
                };
            },
            // 2、components里面做记录
            components: {
                child
            },
            methods: {
                showMsgFromChild: function(data){
                    //data参数就是接收的数据
                    //传递过来的数据赋值给childMsg，用于页面显示
                    this.childMsg=data;
                }
            }
        };
    </script>
</body>
</html>